<template>
  <div v-loading="loading">
    <el-card
      v-if="info"
      shadow="always"
      class="box-card flex"
      style="margin: 20px; width: 740px;"
    >
      <el-button icon="el-icon-edit" type="primary" plain @click="updateHandle"
      >修改信息
      </el-button
      >
      <div
        class="flex"
        style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <el-image
          style="
            width: 100%;
            height: auto;
            margin-right: 25px;
          "
          :src="info.schoolPic"
          fit="contain"
          :preview-src-list="[info.schoolPic]"
        ></el-image>
        <div class="title_content">

        </div>
      </div>
      <div class="info" style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <div style="margin-top: 15px;font-size: 20px;font-weight: 600;color: rgba(48, 49, 51, 1);">{{ info.schoolName }}</div>
      </div>
      <div class="info" style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <div class="t1">基本信息</div>
        <div class="t2">
          地址：{{ info.schoolArea }}{{ info.schoolAddress }}
        </div>
        <div class="t2">联系人：{{ info.principal }}</div>
        <div class="t2">电话：{{ info.tel }}</div>
      </div>
      <div class="info">
        <div class="t1">学校简介</div>
        <div
          style="white-space: pre-wrap;word-wrap:break-word;width: 100%;margin-top: 10px;font-size: 14px;font-weight: 400;color: rgba(48, 49, 51, 1);"
        >{{ info.content }}
        </div>
      </div>
    </el-card>
    <el-empty
      style="margin-top: 80px"
      v-if="!info"
      description="暂无信息~"
    ></el-empty>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="修改信息"
      :visible.sync="open"
      width="1200px"
      append-to-body
    >
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <!-- 学校名称 -->
          <el-col :span="12">
            <el-form-item label="名称" prop="schoolName">
              <el-input
                style="width: 80%"
                v-model="form.schoolName"
                :placeholder="`请输入${$schoolName?$schoolName:'学校'}名称`"
              />
            </el-form-item>
          </el-col>
          <!-- 学校地区 -->
          <el-col :span="12">
            <el-form-item :label="`${$schoolName?$schoolName:'学校'}地区`" prop="schoolArea">
              <el-cascader
                v-model="form.schoolArea"
                :options="options"
                :props="TagProps"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <!-- 学校logo -->
          <el-col :span="12">
            <el-form-item :label="`${$schoolName?$schoolName:'学校'}logo`" prop="schoolPic">
              <div class="">
                <!-- 上传图片 -->
                <div
                  v-if="form.schoolPic"
                  class="upload-head-edit"
                  @click="editCropper()"
                >
                  <img v-bind:src="form.schoolPic" class="show_img_edit"/>
                </div>
                <div v-else class="upload-head" @click="editCropper()">
                  <div><img src="@/assets/images/add.png" class="add" alt="加载失败"/></div>
                  <div>上传图片</div>
                </div>

                <div class="uploadTip_edit">
                  建议图片比例4:1或320*80px，支持jpg、png格式，图片小于5M
                </div>
              </div>

              <vuecut
                :w="320"
                :h="80"
                :url="form.schoolPic"
                @coverResult="coverResult"
                title="图片上传"
                :open.sync="vuecutshow"
              ></vuecut>
            </el-form-item>
          </el-col>
          <!-- 详细地址 -->
          <el-col :span="12">
            <el-form-item label="详细地址" prop="schoolAddress">
              <el-input
                style="width: 80%"
                maxlength="500"
                show-word-limit
                :rows="2"
                v-model="form.schoolAddress"
                type="textarea"
                placeholder="请输入详细地址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`${$schoolName?$schoolName:'学校'}简介`" prop="content">
              <el-input
                style="width: 80%"
                maxlength="500"
                show-word-limit
                :rows="4"
                v-model="form.content"
                type="textarea"
                :placeholder="`请输入${$schoolName?$schoolName:'学校'}简介`"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="principal">
              <el-input
                style="width: 80%"
                v-model="form.principal"
                placeholder="请输入联系人"
              />
            </el-form-item>
            <el-form-item label="电话" prop="tel">
              <el-input
                style="width: 80%"
                v-model="form.tel"
                placeholder="请输入电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChinaCitys from '@/utils/ChinaCitys.json'
import {
  getPost_school,
  updatePost_school
} from '@/api/schoolOrganization/schoolInfo'

let reg = /.+?(省|市|自治区|自治州|县|区)/g
export default {
  props: {},
  data() {
    return {
      info: null,
      loading: false,
      vuecutshow: false,
      // 是否显示弹出层
      open: false,
      TagProps: {
        value: 'label',
        label: 'label',
        children: 'children'
      },
      //   学校地区 列表
      options: ChinaCitys,
      // 表单参数
      form: {
        schoolId: undefined,
        schoolName: undefined,
        schoolArea: undefined,
        schoolAddress: undefined,
        schoolPic: undefined,
        tel: undefined,
        content: undefined,
        principal: undefined
      },
      // 表单校验
      rules: {
        schoolName: [
          { required: true, message: `${this.$schoolName ? this.$schoolName : '学校'}名称不能为空`, trigger: 'blur' }
        ],
        schoolArea: [
          { required: true, message: '地区不能为空', trigger: 'blur' }
        ],
        schoolAddress: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        schoolPic: [
          { required: true, message: `${this.$schoolName ? this.$schoolName : '学校'}图片不能为空`, trigger: 'blur' }
        ],
        tel: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        principal: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {},
  methods: {
    /** 组件返回图片 */
    coverResult(e) {
      this.form.schoolPic = e
    },
    editCropper() {
      this.vuecutshow = true
    },
    /** 修改学校信息按钮 */
    updateHandle() {
      this.open = true
      let form = JSON.parse(JSON.stringify(this.info))
      form.schoolArea = form.schoolArea.match(reg)
      this.form = form
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))
          form.schoolArea = form.schoolArea.join('')
          updatePost_school(form).then(() => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getInfo()
          })
        }
      })
    },
    /** 获取学校信息 */
    getInfo() {
      this.loading = true
      getPost_school().then((res) => {
        this.loading = false
        this.info = res.data
      })
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style scoped lang="scss">
.title_content {
  width: 420px;

  .title {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(48, 49, 51, 1);
    text-align: center;
  }

  .content {
    width: 420px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
  }
}

.info {
  .t1 {
    margin: 5px 0 10px 0;
    font-size: 20px;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
  }

  .t2 {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(96, 98, 102, 1);
  }
}

.upload-head-edit {
  width: 322px;
  height: 82px;
  border: 1px dashed #b8c4d1;
  border-radius: 4px;
  cursor: pointer;
}

.show_img_edit {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.uploadTip_edit {
  font-size: 12px;
  font-weight: 400;
  color: #a6a6a6;
}
</style>
